<template>
    <Panel-head :route="route"/>
    <div class="btns">
 <el-button :icon="Plus" type="primary" @click="open(null)" size="small">新增</el-button>
    </div>
   
    <el-table :data="tableData.list" style="width: 100%">
        <el-table-column prop="id" label="id" />
        <el-table-column prop="name" label="昵称"  />
        <el-table-column prop="permissionName" label="菜单权限" width="500px" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" @click="open(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
        
    </el-table>
   <div class="pagination-info">
     <el-pagination v-model:current-page="paginationData.pageNum" :page-size="paginationData.pageSize" size="small"
        :background="false" layout="total, prev, pager, next" :total="tableData.total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
   </div>

    <el-dialog v-model="dialogFormVisable" :before-close="beforeClose" title="添加权限" width="500">
        <el-form ref="formRef" label-width="100px" label-position="left" :model="form" :rules="rules">
            <el-form-item v-show="false" label="id" prop="id">
                <el-input v-model="form.id" />
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" placeholder="请填写权限名称" />
            </el-form-item>
            <el-form-item label="权限" prop="permissions">
                <el-tree ref="treeRef" :data="permissionData" style="max-width: 600px;" node-key="id" show-checkbox
                    :default-checked-keys="defaultKeys" :default-expanded-keys="[2]" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="confirm(formRef)">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { userGetmenu, userSetmenu, menuList } from '../../../api';
import { ref, reactive, onMounted, nextTick } from 'vue';
import { Plus } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
const route=useRoute()
onMounted(() => {
    userGetmenu().then(({ data }) => {
        permissionData.value = data.data
    })
    getListData()
})

// 列表属性
const tableData = reactive({
    list: [],
    total: 0

})

// 打开弹窗
const open = (rowData = {}) => {

    dialogFormVisable.value = true
    // 弹窗打开form生成是异步的
    nextTick(() => {
        if (rowData) {
            // 浅拷贝
            Object.assign(form, { id: rowData.id, name: rowData.name })
            console.log(rowData, 'rowdata')

            treeRef.value.setCheckedKeys(rowData.permission)
        }
    })

}


// 定义响应式数据
const paginationData = reactive({
    pageNum: 1,
    pageSize: 10
})

// 分页函数点击页码
const handleSizeChange = (val) => {
    paginationData.pageSize = val
    getListData()
}
// 点击当前页
const handleCurrentChange = (val) => {
    paginationData.pageNum = val
    getListData()

}
//请求列表数据
const getListData = () => {
    menuList(paginationData).then(({ data }) => {
        // 解构出来
        const { list, total } = data.data
        tableData.list = list
        tableData.total = total
        console.log(data)
    })
}

const formRef = ref()
const form = reactive({
    name: '',
    permissions: '',
    id: ''
})

// 树型菜单权限数据
const permissionData = ref([])

// 控制弹窗的隐藏
const dialogFormVisable = ref(false)

// 关闭弹窗的回调
const beforeClose = () => {
    dialogFormVisable.value = false
    //重置表单
    formRef.value.resetFields()
    // tree选择重置
    treeRef.value.setCheckedKeys(defaultKeys)
}
// 选中权限
const defaultKeys = [4, 5]
const treeRef = ref()


const rules = reactive({
    name: [
        {
            required: true,
            message: '请输入权限名称',
            trigger: 'blur'
        }
    ]
})

// 表单提交
const confirm = async (formEl) => {
    if (!formEl.value) {
        await formEl.validate((valid, feilds) => {
            if (valid) {
                //获取到选择的checkbox数据
                const permissions = JSON.stringify(treeRef.value.getCheckedKeys())
                userSetmenu({ name: form.name, permissions, id: form.id }).then(({ data }) => {
                    console.log(data)
                    // 关闭弹窗
                    beforeClose()
                    // 刷新列表
                    getListData()
                })
            } else {
                console.log('校验失败', feilds)
            }
        })
    }
}

</script>
<style lang="less" scoped>
.btns{
 padding: 10px 0 10px 10px;
 background-color: #fff;
}

</style>